/**
 * Form Style for KISSY from bootstrap.
 * @author yiminghe@gmail.com
 */

@import "variables.less";
@import "mixins.less";


// Mixin for form field states
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
// Set the text color
    > label,
    .help-block,
    .help-inline {
        color: @textColor;
    }
// Style inputs accordingly
    .checkbox,
    .radio,
    input,
    select,
    textarea {
        color: @textColor;
        border-color: @borderColor;
        &:focus {
            border-color: darken(@borderColor, 10%);
            .box-shadow(0 0 6px lighten(@borderColor, 20%));
        }
    }
// Give a small background color for input-prepend/-append
    .input-prepend .add-on,
    .input-append .add-on {
        color: @textColor;
        background-color: @backgroundColor;
        border-color: @textColor;
    }
}


// grids
#grid > .input(@gridColumnWidth, @gridGutterWidth);

input[class*="span"],
select[class*="span"],
uneditable-input[class*="span"],
textarea[class*="span"] {
    float: none;
    margin-left: 0;
}

// Everything else
textarea,
select,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
    background-color: @inputBackground;
    border: 1px solid @inputBorder;
    border-radius: @inputBorderRadius;
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
    @transition: border linear .2s, box-shadow linear .2 s;
    .transition(@transition); // Focus state
    &:focus {
        border-color: rgba(82, 168, 236, .8);
        outline: 0;
        outline: thin dotted \9; /* IE6-9 */
        .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
    }
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
    padding: 4px;
    line-height: @baseLineHeight;
    color: @inputColor;
}

input[type="radio"], input[type="checkbox"] {
    margin: 3px 0;
}

label {
    display: block;
    margin-bottom: 5px;
}

.form-actions {
    padding: (@baseLineHeightPx - 1) 20px @baseLineHeightPx;
    margin-top: @baseLineHeightPx;
    margin-bottom: @baseLineHeightPx;
    background-color: @formActionsBackground;
    border-top: 1px solid #e5e5e5;
    .ks-clear_(); // Adding clearfix to allow for .pull-right button containers
}

// INPUT SIZES
// -----------

// General classes for quick sizes
.input-mini       { width: 60px; }
.input-small      { width: 90px; }
.input-medium     { width: 150px; }
.input-large      { width: 210px; }
.input-xlarge     { width: 270px; }
.input-xxlarge    { width: 530px; }


// DISABLED STATE
// --------------

// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
    cursor: not-allowed;
    background-color: @inputDisabledBackground;
    border-color: @inputDisabledColor;
}
// Explicitly reset the colors here
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
    background-color: transparent;
}


// HELP TEXT
// ---------

.help-block,
.help-inline {
    color: @gray; // lighten the text some for contrast
}

.help-block {
    display: block; // account for any element using help-block
    margin-bottom: @baseLineHeightPx / 2;
}

.help-inline {
    .ks-inline-block_();
    vertical-align: middle;
    padding-left: 5px;
}


// stack, vertical form layout
.form-vertical {
    margin-bottom:18px;
    label {
        display: block;
        margin-bottom: 5px;
    }
}


// CHECKBOXES & RADIOS
// -------------------

// Indent the labels to position radios/checkboxes as hanging
.radio,
.checkbox {
    min-height: 18px; // clear the floating input if there is no label text
    padding-left: 18px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    // position correctly
    float: left;
    margin-left: -18px;
}

// Move the options list down to align with labels
.controls > .radio:first-child,
.controls > .checkbox:first-child {
  padding-top: 5px; // has to be padding because margin collaspes and label is padding.
}

// Radios and checkboxes on the same line
.radio.control-inline,
.checkbox.control-inline {
    .ks-inline-block_();
    padding-top: 5px;
    margin-bottom: 0;
    vertical-align: middle;
}
.radio.control-inline + .radio.control-inline,
.checkbox.control-inline + .checkbox.control-inline {
    margin-left: 10px; // space out consecutive inline controls
}



// SEARCH FORM
// -----------

.form-search .search-query {
    padding-right: 14px;
    padding-right: 4px \9;
    padding-left: 14px;
    padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0; // remove the default margin on all inputs
    border-radius: 14px
}

.form-search label,
.form-inline label {
    display: inline-block;
}
// Remove margin for input-prepend/-append
.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
    margin-bottom: 0;
}
// Inline checkbox/radio labels (remove padding on left)
.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
    padding-left: 0;
    margin-bottom: 0;
    vertical-align: middle;
}
// Remove float and margin, set to inline-block
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
    float: left;
    margin-right: 3px;
    margin-left: 0;
}



// Horizontal-specific styles
// --------------------------

.form-horizontal {
// Increase spacing between groups
    .control-group {
        margin-bottom: @baseLineHeightPx;
        .ks-clear_();
    }
// Float the labels left
    .control-label {
        float: left;
        width: 140px;
        padding-top: 5px;
        text-align: right;
    }
// Move over all input controls and content
    .controls {
        margin-left: 160px;
    }
// Remove bottom margin on block level help text since that's accounted for on .control-group
    .help-block {
        margin-top: @baseLineHeightPx / 2;
        margin-bottom: 0;
    }
// Move over buttons in .form-actions to align with .controls
    .form-actions {
        padding-left: 160px;
    }
}


// FORM FIELD FEEDBACK STATES
// --------------------------

// Warning
.control-group.warning {
    .formFieldState(@warningText, @warningText, @warningBackground);
}
// Error
.control-group.error {
    .formFieldState(@errorText, @errorText, @errorBackground);
}
// Success
.control-group.success {
    .formFieldState(@successText, @successText, @successBackground);
}



// INPUT GROUPS
// ------------

// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
    margin-bottom: 5px;
    input,
    select,
    .uneditable-input {
        position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
        margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
        *margin-left: 0;
        border-radius:0 @inputBorderRadius @inputBorderRadius 0;
    // Make input on top when focused so blue border and shadow always show
        &:focus {
            z-index: 2;
        }
    }
    .uneditable-input {
        border-left-color: #ccc;
    }
    .add-on {
        display: inline-block;
        width: auto;
        height: @baseLineHeightPx;
        min-width: 16px;
        padding: 4px 5px;
        font-weight: normal;
        line-height: @baseLineHeightPx;
        text-align: center;
        text-shadow: 0 1px 0 @white;
        vertical-align: middle;
        background-color: @grayLighter;
        border: 1px solid #ccc;
    }
    .add-on,
    .ks-button {
        margin-left: -1px;
        border-radius: 0;
    }
}
.input-prepend {
    .add-on,
    .ks-button {
        margin-right: -1px;
    }
    .add-on:first-child,
    .ks-button:first-child {
        border-radius: @inputBorderRadius 0 0 @inputBorderRadius;
    }
}
.input-append {
    input,
    select,
    .uneditable-input {
        border-radius:@inputBorderRadius 0 0 @inputBorderRadius;
    }
    .uneditable-input {
        border-right-color: #ccc;
        border-left-color: #eee;
    }
    .add-on:last-child,
    .ks-button:last-child {
        border-radius:0 @inputBorderRadius @inputBorderRadius 0;
    }
}
// Remove all border-radius for inputs with both prepend and append
.input-prepend.input-append {
    input,
    select,
    .uneditable-input {
        border-radius:(0);
    }
    .add-on:first-child,
    .ks-button:first-child {
        margin-right: -1px;
        border-radius:@inputBorderRadius 0 0 @inputBorderRadius;
    }
    .add-on:last-child,
    .ks-button:last-child {
        margin-left: -1px;
        border-radius:0 @inputBorderRadius @inputBorderRadius 0;
    }
}